{% extends "base.html" %}

{% load staticfiles %}

{% block title %}
    我的网站|首页
{% endblock %}
{% block nav_home_active %}
    active
{% endblock %}
{% block header_extends %}
    <link rel="stylesheet" href="{% static 'home.css' %}">
    <script src="{% static 'highcharts/highcharts.js' %}"></script>
{#    <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>#}

{% endblock %}

{% block content %}

    <h3 class="home-content">欢迎访问我的网站</h3>

    <!-- 图表容器 DOM -->
    <div id="container"></div>
    <!-- 引入 highcharts.js -->
    <!--24小时热门博客 -->
    <div class="hot_day_title">
        <h3>今日热门博客</h3>
        <ul>
            {% for hot_data in today_hot_data %}

                <li>
                    <a href="{% url 'blog_datell' hot_data.content_object.pk %}">
                        {{ hot_data.content_object.title }}（{{ hot_data.read_num }}）
                    </a>
                </li>

            {% empty %}
                <li>今日暂无热门博客</li>
            {% endfor %}
        </ul>

    </div>

    <div class="hot_day_title">
        <!--昨日热门博客暂有BUG已修复。。转至utils查看。 -->
        <h3>昨日热门博客</h3>
        <ul>
            {% for hot_data in yesterday_hot_data %}

                <li>
                    <a href="{% url 'blog_datell' hot_data.content_object.pk %}">
                        {{ hot_data.content_object.title }}（{{ hot_data.read_num }}）
                    </a>
                </li>

            {% empty %}
                <li>今日暂无热门博客</li>
            {% endfor %}
        </ul>

    </div>

    <div class="hot_day_title">
        <h3>7日热门博客</h3>
        <ul>
            {% for hot_blog in hot_blogs_for_7_days %}

                <li>
                    <a href="{% url 'blog_datell' hot_blog.id %}">
                        {{ hot_blog.title }}（{{ hot_blog.read_num_sum }}）
                    </a>
                </li>

            {% empty %}
                <li>今日暂无热门博客</li>
            {% endfor %}
        </ul>

    </div>



{#    <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>#}
    <script src="{% static 'highcharts/highcharts.js' %}"></script>
    <script>
        // 图表配置
        var options = {
                plotOptions: {

                    series: { //加速渲染
                        animation: false
                    },


                    line: {
                        dataLabels: {
                            enabled: true
                        }
                    }
                },
                credits: { //版权信息
                    enabled: false
                },

                chart: {
                    type: 'line'                          //指定图表的类型，默认是折线图（line）
                },
                legend: {   //图例
                    enabled: false
                },

                title: {
                    text: null                 // 标题
                },
                xAxis: {
                    categories: {{ dates|safe }},   // x 轴分类\
                    title: {text: '前七日阅读量'}
                },
                yAxis: {
                    title: {
                        text: null                // y 轴标题
                    },
                    labels: {
                        enabled: false
                    },

                },
                series: [{                              // 数据列
                    name: '阅读量',                        // 数据列名
                    data: {{ read_nums }}                    // 数据
                }],


            }
        ;
        // 图表初始化函数
        var chart = Highcharts.chart('container', options);
    </script>
{% endblock %}